<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户详情 - 卡片式任务记录系统</title>
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入自定义样式 -->
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/user-detail.css">
</head>
<body>
  <div id="app">
    <el-container class="main-container">
      <!-- 头部区域 -->
      <el-header height="auto">
        <div class="header-content">
          <div class="header-left">
            <el-button icon="el-icon-back" @click="goBack">返回</el-button>
            <h2>个人中心</h2>
          </div>
          <div class="header-right">
            <el-button type="primary" @click="saveUserInfo" :disabled="!isEditing">保存</el-button>
            <el-button @click="toggleEdit">{{ isEditing ? '取消' : '编辑' }}</el-button>
          </div>
        </div>
      </el-header>
      
      <!-- 主体区域 -->
      <el-main>
        <el-row :gutter="20">
          <!-- 左侧个人信息 -->
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-card class="user-card">
              <div class="user-avatar-container">
                <el-avatar :size="100" :src="userInfo.avatar">
                  {{ userInfo.name.charAt(0) }}
                </el-avatar>
                <div class="upload-avatar" v-if="isEditing">
                  <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :http-request="handleAvatarUpload">
                    <el-button size="small" type="primary" plain>更换头像</el-button>
                  </el-upload>
                </div>
              </div>
              
              <div class="user-info">
                <h3>{{ userInfo.name }}</h3>
                <p class="user-account">{{ userInfo.account }}</p>
                <p class="user-email">{{ userInfo.email }}</p>
                <p class="join-time">加入时间：{{ userInfo.createTime }}</p>
              </div>
              
              <el-divider></el-divider>
              
              <div class="user-stats">
                <div class="stat-item">
                  <h4>{{ statistics.cardCount }}</h4>
                  <p>任务卡片</p>
                </div>
                <div class="stat-item">
                  <h4>{{ statistics.completedCount }}</h4>
                  <p>已完成</p>
                </div>
                <div class="stat-item">
                  <h4>{{ statistics.collectCount }}</h4>
                  <p>收藏</p>
                </div>
              </div>
            </el-card>
          </el-col>
          
          <!-- 右侧详细信息 -->
          <el-col :xs="24" :sm="24" :md="16" :lg="18" :xl="18">
            <el-card class="user-detail-card">
              <el-tabs v-model="activeTab">
                <el-tab-pane label="基本资料" name="profile">
                  <el-form ref="userForm" :model="userInfo" label-width="100px" :disabled="!isEditing">
                    <el-form-item label="用户名">
                      <el-input v-model="userInfo.name"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="邮箱">
                      <el-input v-model="userInfo.email"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="手机号码">
                      <el-input v-model="userInfo.phone"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="个人简介">
                      <el-input type="textarea" v-model="userInfo.bio" :rows="4"></el-input>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                
                <el-tab-pane label="安全设置" name="security">
                  <el-form ref="securityForm" :model="securityForm" label-width="100px" :rules="securityRules">
                    <el-form-item label="原密码" prop="oldPassword">
                      <el-input type="password" v-model="securityForm.oldPassword" show-password :disabled="!isEditing"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="新密码" prop="newPassword">
                      <el-input type="password" v-model="securityForm.newPassword" show-password :disabled="!isEditing"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="确认密码" prop="confirmPassword">
                      <el-input type="password" v-model="securityForm.confirmPassword" show-password :disabled="!isEditing"></el-input>
                    </el-form-item>
                    
                    <el-form-item>
                      <el-button type="primary" @click="changePassword" :disabled="!isEditing">修改密码</el-button>
                    </el-form-item>
                  </el-form>
                  
                  <el-divider></el-divider>
                  
                  <h4>账号安全</h4>
                  <el-form label-width="100px">
                    <el-form-item label="登录保护">
                      <el-switch v-model="securitySettings.loginProtection" :disabled="!isEditing"></el-switch>
                      <span class="security-tip">开启后，每次登录都需要进行身份验证</span>
                    </el-form-item>
                    
                    <el-form-item label="登录通知">
                      <el-switch v-model="securitySettings.loginNotification" :disabled="!isEditing"></el-switch>
                      <span class="security-tip">开启后，每次登录都会收到邮件通知</span>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
                
                <el-tab-pane label="通知设置" name="notification">
                  <el-form label-width="100px">
                    <el-form-item label="系统通知">
                      <el-switch v-model="notificationSettings.system" :disabled="!isEditing"></el-switch>
                      <span class="setting-tip">接收系统更新、维护等通知</span>
                    </el-form-item>
                    
                    <el-form-item label="任务提醒">
                      <el-switch v-model="notificationSettings.task" :disabled="!isEditing"></el-switch>
                      <span class="setting-tip">接收任务截止日期、变更等提醒</span>
                    </el-form-item>
                    
                    <el-form-item label="评论通知">
                      <el-switch v-model="notificationSettings.comment" :disabled="!isEditing"></el-switch>
                      <span class="setting-tip">接收他人对你任务的评论通知</span>
                    </el-form-item>
                    
                    <el-form-item label="接收方式">
                      <el-checkbox-group v-model="notificationSettings.methods" :disabled="!isEditing">
                        <el-checkbox label="email">邮件</el-checkbox>
                        <el-checkbox label="sms">短信</el-checkbox>
                        <el-checkbox label="app">应用内</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>
                  </el-form>
                </el-tab-pane>
              </el-tabs>
            </el-card>
          </el-col>
        </el-row>
      </el-main>
    </el-container>
  </div>
  
  <!-- 引入Vue.js -->
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入用户详情页JS -->
  <script src="./js/user-detail.js"></script>
</body>
</html> 